@charset "UTF-8";
/*第四页*/
.forth {
  //display: none;
  .fp-tableCell {
    position: relative;
    overflow: hidden;
    padding-top: 60px;
    div.w {
      height: 100%;
      overflow: hidden;
      position: relative;
      padding: 0 10px;
      //skill部分
      div.skill {
        width: 100%;
        height: 90%;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 0.5rem;
        padding: 10px 0 0 12px;
        transition: all 1s ease 1.5s;
        position: relative;
        a {
          display: inline-block;
          background-color: rgba(255, 255, 255, 0.8);
          font-size: 2rem;
          line-height: 2rem;
          color: black;
          font-weight: 800;
          padding: 0.5rem;
          border-radius: 0.5rem;
          text-align: center;
        }
        @media (max-width: 768px) {
          a {
            font-size: 30px;
            padding: 5px;
            border-radius: 6px;
          }
        }
        ul.skillUl {
          width: 100%;
          height: 82%;
          margin-top: 10px;
          li:nth-child(1), li:nth-child(2), li:nth-child(3), li:nth-child(4), {
            div.get {
              background-image: linear-gradient(
                      45deg,
                      rgb(0, 0, 64) 25%,
                      red 25%,
                      red 50%,
                      rgb(0, 0, 64) 50%,
                      rgb(0, 0, 64) 75%,
                      red 75%,
                      red 100%,
              );
            }
          }
          li:nth-child(5),li:nth-child(6) {
            div.get {
              background-image: linear-gradient(
                      45deg,
                      rgb(0, 0, 64) 25%,
                      rgb(255, 131, 0) 25%,
                      rgb(255, 131, 0) 50%,
                      rgb(0, 0, 64) 50%,
                      rgb(0, 0, 64) 75%,
                      rgb(255, 131, 0) 75%,
                      rgb(255, 131, 0) 100%,
              );
            }
          }
          li:nth-child(7){
            div.all {
              div.get {
                background-image: linear-gradient(
                        45deg,
                        rgb(56, 111, 111) 25%,
                        gray 25%,
                        gray 50%,
                        rgb(56, 111, 111) 50%,
                        rgb(56, 111, 111) 75%,
                        gray 75%,
                        gray 100%,
                );
              }
            }
          }
          li {
            width: 100%;
            height: 14.5%;
            p {
              height: 50%;
              line-height: 100%;
              padding-right: 1rem;
              span {
                display: inline-block;
                font-size: 0.8rem;
                padding: 5px;
                border-radius: 4px;
                text-align: center;
              }
              span:first-child {
                color: white;
                background: black;
              }
              span:last-child {
                text-align: center;
                color: red;
                background: rgba(255, 255, 0, 0.7);

              }
            }
            div.all {
              width: 90%;
              height: 30%;
              background-color: rgb(153, 217, 234);
              position: relative;
              border-radius: 8px 8px 8px 8px;
              box-shadow: 1px 1px 3px black;
              div.get {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 0;
                background-size: 12px 12px;
                background-position: 0 0;
                animation: move 1s linear infinite;
                border-radius: 8px 8px 8px 8px;
                transition: all 1s linear 1s;
                @keyframes move {
                  0% {
                    background-position: 0 0;
                  }
                  100% {
                    background-position: 12px 0;
                  }
                }
              }
            }
          }
        }
      }
    }
    //联系方式
    .contact {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 8%;
      transform: translateY(100%);
      background-color: rgb(0, 64, 0);
      border-radius: 0.6rem;
      transition: all 1s linear;
      //联系方式
      ul {
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 6px;
        li {
          font-size: 1.2rem;
          position: absolute;
          top: 40%;
          a {
            margin-right: 0.5rem;
            background-color: rgb(0, 64, 0);
            color: rgb(160, 50, 0);
            padding: 5px;
            font-size: 1.4rem;
            a:hover {
              color: white;
            }
            span {
              font-weight: 700;
              font-size: 1.4rem;
              color: white;
              padding-right: 0.5rem;
            }
            @media (max-width: 768px) {
              span {
                font-size: 16px;
              }
            }
          }
          @media (max-width: 768px) {
            a {
              font-size: 16px;
            }
          }
        }
        li:nth-child(1) {
          left: 5%;
        }
        li:nth-child(2) {
          left: 34%;
        }
        li:nth-child(3) {
          left: 72%;
        }
        @media (max-width: 768px) {
          li:nth-child(2) {
            display: none;
          }

          li:nth-child(3) {
            left: 50%;
          }
        }
      }
      //下划线
      div {
        position: absolute;
        width: 90%;
        height: 1px;
        background-color: rgb(255, 255, 255);
        top: 92%;
        left: 5%;
      }
      //欢迎和我联系
      span.span {
        height: 0.6rem;
        padding: 0 10px;
        line-height: 0.6rem;
        position: absolute;
        top: 76%;
        left: 40%;
        background-color: rgb(0, 64, 0);
        color: white;
        font-size: 0.6rem;
      }
      @media (max-width: 768px) {
        span.span {
          display: none;
        }
      }
    }
  }
  @media (max-width: 768px) {
    .fp-tableCell {
      background-image: url("../images/forth-miblebg.jpeg");
      background-size: 100% 100%;
    }
  }
}

@media (max-width: 768px) {
  .forth {
    display: block;
  }
}

//第四屏skill动画
.current {
  div#skillforth {
    ul {
      #skillLi1forth {
        div.get {
          width: 80%;
        }
      }
      #skillLi2forth {
        div.get {
          width: 80%;
        }
      }
      #skillLi3forth {
        div.get {
          width: 80%;
        }
      }
      #skillLi4forth {
        div.get {
          width: 80%;
        }
      }
      #skillLi5forth {
        div.get {
          width: 40%;
        }
      }
      #skillLi6forth {
        div.get {
          width: 40%;
        }
      }
      #skillLi7forth {
        div.get {
          width: 10%;
        }
      }
    }
  }
  #forthContact {
    transform: translateY(0);
  }
}
